<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepSeek AI 对话应用</title>
    <script src="https://cdn.tailwindcss.com"></script>

    <style>
        .chat-container {
            height: 70vh;
            background-color: #f8fafc;
            border-radius: 1rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .message-ai {
            background-color: #3b82f6;
            color: white;
            border-radius: 1rem 1rem 0 1rem;
        }

        .message-user {
            background-color: #e2e8f0;
            color: #1e293b;
            border-radius: 1rem 1rem 1rem 0;
        }
    </style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-center text-blue-600 mb-8">DeepSeek AI 对话应用</h1>

    <div class="chat-container p-4 mb-4 overflow-y-auto">
        <div id="chat-messages" class="space-y-4"></div>
    </div>

    <div class="flex space-x-2">
        <input type="text" id="message-input"
               class="flex-1 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
               placeholder="输入消息...">
        <button id="send-button"
                class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
            发送
        </button>
    </div>
</div>

<script>
    const messageInput = document.getElementById('message-input');
    const sendButton = document.getElementById('send-button');
    const chatMessages = document.getElementById('chat-messages');

    sendButton.addEventListener('click', sendMessage);
    messageInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') sendMessage();
    });

    function sendMessage() {
        const message = messageInput.value.trim();
        if (!message) return;

        // 添加用户消息
        addMessage(message, 'user');
        messageInput.value = '';

        // 发送到后端
        // fetch('/api/agent/chat?message=' + encodeURIComponent(message))
        //     .then(response => response.text())
        //     .then(response => {
        //         addMessage(response, 'ai');
        //     })
        //     .catch(error => {
        //         addMessage('发生错误: ' + error, 'ai');
        //     });
        fetch('http://127.0.0.1:8908/api/agent/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                userId: '888888',
                message: message
            })
        }).then(response => response.json())
            .then(response => {
                addMessage(response.message, 'ai');
            })
            .catch(error => {
                addMessage('发生错误: ' + error, 'ai');
            });

    }

    function addMessage(text, sender) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `p-4 max-w-3/4 ${sender === 'ai' ? 'message-ai ml-auto' : 'message-user mr-auto'}`;
        messageDiv.innerHTML = text;
        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
</script>
</body>
</html>